<template>
	<view>
		<view style="    padding-left: 20px;
    font-size: 20px;">
			全部
		</view>
		<view class="grid-body">
			<view class="mainContent" v-if="list.length != 0">
				<view class="card" v-for="item in list" :key="item.id">
					<view class="card-img">
						<u-image :src="item.cover" width="150px" height="100px" radius="20px"></u-image>
					</view>
					<view class="card-text">
						<view class="title">{{ item.name }}</view>
						<view class="time">{{ item.startTime }} - {{ item.endTime }}</view>
						<view class="card-button">
							<view style="font-size: 13px;color: grey;display: flex;align-items: flex-end;">
								<view style="color: #0081ff">报名中 {{item.applyNumber}}</view>
								<view>/{{item.totalNumber}}</view>
							</view>
							<view class="buttonClass" @click="goXiangqing(item.id)">修改</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view style="text-align: center;margin-top: 200rpx;">暂无记录 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getActivityfabu } from '../../../api/Acitvity/Api';
	export default {
		data() {
			return {
				list: [],
				noData: false,
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
			}
		},
		methods: {
			getList() {
				getActivityfabu().then(res => {
					this.list = res.rows
				})
			},
			goXiangqing(id) {
				uni.navigateTo({
					url: `/pages/mine/activity/fix?id=${id}`,
				  });
			}
		},

		onReachBottom() {
		},

		onLoad() {
			this.getList();
		},
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F1f1f1;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.doctor {
		display: flex;
		margin: 20rpx;
		border: 1rpx #CCC solid;
		background: #fff;
	}

	.doctor .ima {
		flex: 0.6;
		padding: 20rpx;
		width: 160rpx;
		display: grid;
		place-items: center;
	}

	.doctor .content {
		flex: 3;
		padding: 20rpx
	}

	.doctor .content .name {
		font-size: 28rpx;
		font-weight: 600;
		margin: 5rpx 0;
	}

	.doctor .content .info {
		font-size: 24rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5em;
	}

	.doctor .content .info .ietm {
		display: flex;
		padding: 8rpx;
	}
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #ffffff;
		min-height: 100%;
		height: auto;
	}
	
	view {
		font-size: 14px;
		line-height: inherit;
	}
	.search{
		padding:0 20px;
	}
	.tabs{
		display: flex;
		width: 100%;
		margin-top: 15px;
		justify-content: space-evenly;
		align-items: center;
	}
	.calenderValue{
		width:10%;
		line-height: 38px;	
	}
	.dropdown{
		width: 90px;
	}
	.u-dropdown__content__mask{
		background: none;
	}
	.mainContent{
		background-color: #fff;
		padding: 20px;
	}
	.card{
		background-color: #f1f1f1;
		height: 150px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		padding: 24px 20px;
		gap:12px;
		margin-bottom: 20px;
	}
	.card-img{
		border-radius: 20px;
	}
	.card-text{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-between;
	}
	.card-button{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title{
		font-size: 15px;
		color: #000;
		font-weight: 550;
	}
	.time{
		font-size:12px;
		color:grey;
	}
	.buttonClass{
		background-color: skyblue;
		border-radius: 15px;
		padding: 5px;
	}
	.buttonClass:hover{
		background-color:#87ceeb75;
	}
</style>